.color1{
    /* 线性渐变 */
    width: 350px;
    height: 300px;
    border: 1px solid red;
    background-image: linear-gradient(54deg,red,orange,rgb(44, 44, 12),rgb(215, 35, 35),rgb(58, 58, 195) 50%);
    margin-left: 460px;
    margin-right: 200px;
    margin-top: 10px;
}
.color2{
    /* 径向渐变 */
    margin-left: 460px;
    margin: right 200px; ;
    width: 350px;
    height: 300px;
    border: 2px dashed darkblue;
    background-image: radial-gradient(ellipse,blue,transparent)

    
   
}
.color3{
    /* 重复线性 */
    width: 350px;
    height:300px ;
    border:3px double plum;
    background-image: repeating-linear-gradient(to right,rgb(20, 202, 202),rgb(226, 21, 226) 50px);
    margin-left: 460px;
    margin-right: 200px;
}
.color4{
    /* 重复径向 */
    margin-left: 460px;
    margin-right: 200px;
    width: 350px;
    height:300px ;
    border:4px dotrgb(36, 69, 18)rgb(88, 13, 88);
    background-image:repeating-radial-gradient(circle,rgb(152, 139, 169),rgb(96, 69, 120) 20px)
    
}